$(function() {

    $('.small').on('mouseover', function() {
        // 1. 显示movebox和big
        $('.movebox').addClass('show6').removeClass('hide6');
        $('.big').addClass('show6').removeClass('hide6');

        // 3. 计算movebox大小 movebox:small = big:bigpic    movebox:big = small:bigpic
        // 获取元素的大小 只能获取可见元素
        $('.movebox').css({
            'width': $('.small').width * $('.big').width / $('.bigpic').width + 'px',
            'height': $('.small').height * $('.big').height / $('.bigpic').height + 'px'
        });

        // 2.鼠标跟随
        $('.small').on('mousemove', function(ev) {
            // 计算移动的距离
            var $top = ev.pageY - $('.small').offset().top - ($('.movebox').height / 2);
            var $left = ev.pageX - $('.small').offset().left - ($('.movebox').width / 2);

            var $ratio = $('.bigpic').width / $('.small').width; //比例必须大于1

            // 边界管理
            if ($left <= 0) {
                $left = 0;
            } else if ($left > $('.small').width - $('.movebox').width) {
                $left = $('.small').width - $('.movebox').width - 2;
            }

            if ($top <= 0) {
                $top = 0;
            } else if ($top > $('.small').height - $('.movebox').height) {
                $top = $('.small').height - $('.movebox').height - 2;
            }

            $('.movebox').css({
                'left': $left + 'px',
                'top': $top + 'px'
            });

            $('.bigpic').css({
                'left': -$left * $ratio + 'px',
                'top': -$top * $ratio + 'px',
            });
        });
    });



    $('.small').on('mouseout', function() {
        $('.movebox').removeClass('show6').addClass('hide6');
        $('.big').removeClass('show6').addClass('hide6');
    })
});